<template>
  <div class="news-wrap">
    <SearchBox
      :fields="search.fields"
      :data="search.data"
      @reset="onReset"
      @submit="doSelect">
      <template #category>
        <el-select v-model="search.data.category">
          <el-option
            v-for="(item, index) in opts.categoryList"
            :key="index"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </template>
    </SearchBox>
    <TableBox
      ref="table"
      :cols="table.cols"
      :xhr="queryData">
      <template #imageUrl="{ row, index }">
        <img
          width="50"
          :src="row.imageUrl" />
      </template>
      <template #headAction="{ selection, reload, refresh }">
        <el-button
          type="primary"
          @click.stop="doAdd">
          新增
        </el-button>
      </template>
      <template #urlType="{ row, index }">{{ formateName('urlType', row.urlType) }}</template>
      <template #category="{ row, index }">{{ formateName('category', row.category) }}</template>
      <template #actions="{ row, index }">
        <PromiseBtn
          link
          size="small"
          type="primary"
          @click.stop="doDetail(row.id, true)">
          查看
        </PromiseBtn>
        <PromiseBtn
          link
          size="small"
          type="primary"
          @click.stop="doDetail(row.id)">
          编辑
        </PromiseBtn>
        <PromiseBtn
          link
          size="small"
          type="primary"
          @click.stop="doDel(row.id)">
          删除
        </PromiseBtn>
      </template>
    </TableBox>
  </div>
</template>
<script>
import httpService from '@/utils/httpService';
import { newsManageAPI } from '@/config/api';

import { ElMessage } from 'element-plus';
import moment from 'moment';
import { NewsCategory, NewsUrlCategory } from '@/constants/news';

export default {
  name: 'newsList',
  components: {},
  mixins: [],
  data() {
    return {
      search: {
        data: {
          title: '',
          category: '',
        },
        fields: [
          {
            name: 'title',
            label: '新闻标题',
          },
          {
            name: 'category',
            label: '新闻分类',
          },
        ],
      },
      table: {
        cols: [
          {
            key: 'title',
            label: '新闻标题',
            width: 300,
          },
          {
            key: 'category',
            label: '新闻分类',
            width: 200,
          },
          {
            key: 'alt',
            label: '新闻简述',
            width: 300,
          },
          {
            key: 'imageUrl',
            label: '新闻封面',
            minWidth: 200,
          },
          {
            key: 'urlType',
            label: '新闻链接类型',
            width: 120,
          },
          {
            key: 'url',
            label: '新闻链接',
            width: 200,
          },
          {
            key: 'createTime',
            label: '更新时间',
            minWidth: 200,
          },
          {
            key: 'actions',
            label: '操作',
            align: 'center',
            width: 130,
            className: 'col-actions auto',
          },
        ],
      },
      opts: {
        categoryList: NewsCategory,
      },
    };
  },
  computed: {},
  created() {},
  methods: {
    onReset() {
      this.search.data = {
        title: '',
        category: '',
      };
    },
    doSelect() {
      this.$refs.table.reload();
    },
    doAdd() {
      this.$router.push({
        path: '/biz/news/detail',
        query: {
          type: 'save',
        },
      });
    },
    doDetail(id, isView) {
      this.$router.push({
        path: '/biz/news/detail',
        query: {
          type: isView ? 1 : 'save',
          id: id,
        },
      });
    },
    async doDel(id) {
      if (!id) return;
      ElMessageBox.confirm('请确认是否删除该新闻吗', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const { code, data, message } = await httpService.get(newsManageAPI.remove, {
          id: id,
        });
        if (code == 200) {
          ElMessage({
            message,
            type: 'success',
          });
          this.doSelect();
        } else {
          ElMessage.error(message || '系统异常，请稍后重试');
        }
      });
    },
    // 列表
    async queryData({ current, size }) {
      try {
        let list = [],
          totalCount = 0;
        const { code, data, message } = await httpService.get(newsManageAPI.getList, {
          pageNo: current,
          pageSize: size,
          ...this.search.data,
        });
        if (code == '200') {
          data.records.map(
            i => (i.createTime = moment(i.createTime).format('YYYY-MM-DD HH:mm:ss')),
          );
          list = data.records;
          totalCount = data.total;
        } else {
          ElMessage.error(message || '系统异常，请稍后重试');
        }

        return { data: list, totalCount };
      } catch (e) {
        console.log(e);
      }
    },
    formateName(type, value) {
      console.log('formateName:::', type, value);
      const list = type === 'category' ? NewsCategory : NewsUrlCategory;
      return list.filter(i => i.value === value)[0].label || '';
    },
  },
};
</script>
<style lang="scss" scoped></style>
